<template>
  <!--  未读-->
  <div class="whole">
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :msg="tacitly"
          @seek="collect"
          @hand="search"
        />
        <el-button type="primary" class="btn" size="mini" @click="search">
          {{ $t('btn.search') }}
        </el-button>
        <el-button type="primary" class="btn1" size="mini" @click="handleRead">
          全部已读
        </el-button>
      </div>
    </div>
    <div class="table-content">
      <jc-table
        sortable
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        serial
        :tooltip="false"
      >
        <template v-slot:btnSlot="clo">
          <el-button
            type="primary"
            size="mini"
            @click="getInto(clo.scope.row.REDIRECTURL)"
          >
            查看
          </el-button>
        </template>
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getUnreadData"
      />
    </div>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { queryUserMessage, updateMessageAllIsRead } from '@/api/message'
export default {
  name: 'ListBom',
  components: {
    search
  },
  mixins: [searData],
  props: {
    tableHeight: {
      type: String,
      default: '71vh'
    }
  },
  data() {
    return {
      ftype: 0,
      fbillNo: 'fnumber', // 编码
      total: 0, // 总条目
      pageNum: 1, // 当前页
      pageSize: 50, // 每页显示多少条数据
      // 表头
      tableHeader: [
        {
          label: this.$t('market.redirecturl'),
          prop: 'REDIRECTURL',
          minWidth: '100px'
        },
        {
          label: this.$t('market.isread'),
          prop: 'ISREAD',
          minWidth: '120px'
        },
        {
          label: this.$t('market.messageContent'),
          prop: 'MESSAGECONTENT',
          minWidth: '400px'
        },
        {
          label: this.$t('market.createDate'),
          prop: 'CREATETIME',
          minWidth: '120px'
        },
        {
          label: this.$t('market.handle'),
          type: 'btn',
          minWidth: '100px'
        }
      ],
      // 表格数据
      tableData: []
    }
  },
  methods: {
    // 全部已读
    handleRead() {
      const obj = {}
      updateMessageAllIsRead(obj).then(res => {
        const { code, message } = res
        if (this.tableData.length === 0) {
          this.$message.warning('暂无消息')
          return
        }
        if (code !== 0) {
          this.$confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          return
        }
        this.$message({ showClose: true, message: message, type: 'success' })
      })
    },
    search() {
      this.getUnreadData()
      this.pageNum = 1
    },
    async getUnreadData() {
      const obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      const res = await queryUserMessage(obj)
      const { data, code, message } = res
      const { total, list } = data
      if (code !== 0) {
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      this.tableData = list.map(item => {
        const { ISREAD } = item
        if (ISREAD === 0) {
          item.ISREAD = this.$t('market.unread1')
        } else {
          item.ISREAD = this.$t('market.unread2')
        }
        return item
      })
      this.total = total
    },
    // 进入
    getInto(router) {
      this.$router.push({ path: router })
    }
  }
}
</script>
<style lang="scss" scoped>
.whole {
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
    .btn1 {
      transform: translateY(18%);
    }
  }
  .table-content {
    margin-top: 15px;
  }
  .productImg {
    width: auto;
    height: 40px;
  }
  .el-dialog .el-dialog__body {
    text-align: center;
  }
}
.btn {
  transform: translateY(15%);
  margin-left: 450px !important;
}
.read {
  transform: translateY(-2%);
}
</style>
